
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript"
			src="../js/jquery.slidingtabs.demo.pack.js"></script>
		<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script>
		
		<link rel="stylesheet" type="text/css"
			href="../css/slidingtabs-horizontal.css" />
		<link rel="stylesheet" type="text/css"
			href="../css/slidingtabs-vertical.css" />
		<link rel="stylesheet" type="text/css"
			href="../css/demo.css" />
		
		
		<script type="text/javascript">
			<!--
			$(function() {
				$('div#st_horizontal').slideTabs({
					// Options
					contentAnim : 'slideH',
					contentAnimTime : 600,
					contentEasing : 'easeInOutExpo',
					orientation : 'horizontal',
					tabsAnimTime : 300
				});
				$('div#st_vertical').slideTabs({
					// Options
					contentAnim : 'slideH',
					contentAnimTime : 600,
					contentEasing : 'easeInOutExpo',
					orientation : 'vertical',
					tabsAnimTime : 300
				});
		
			});
			-->
		</script>
		
		
		<style type="text/css">
		<!--		
		
		DIV.st_horizontal {
			Z-INDEX: 1000;
			POSITION: relative;
			//WIDTH: 1040px;
			COLOR: #616161;
			CLEAR: both;
			//left: 100px;
			//top: -100px;
			width: 100%;
		}
		DIV.st_horizontal DIV.st_slide_container {
			POSITION: relative !important;
			BORDER-LEFT: #d4d4d4 1px solid;
			//WIDTH: 957px;
			width: 90%;
		}
		DIV.st_horizontal DIV.st_view_container {
			Z-INDEX: 5;
			BORDER-BOTTOM: #d4d4d4 1px solid;
			POSITION: relative;
			BORDER-LEFT: #d4d4d4 1px solid;
			PADDING-BOTTOM: 20px;
			BACKGROUND-COLOR: #fff;
			PADDING-LEFT: 20px;
			//WIDTH: 997px;
			width: 90%;
			PADDING-RIGHT: 20px;
			height: 80%;
			//HEIGHT: 600px;
			OVERFLOW: hidden;
			BORDER-TOP: #d4d4d4 1px solid;
			BORDER-RIGHT: #d4d4d4 1px solid;
			PADDING-TOP: 20px;
			MARGIN-RIGHT: auto; 
			MARGIN-LEFT: auto;
		}
		div#main{
			margin: 20px 40px 0px 50px;
			width: 97%;
			height: 97%;
		}
		-->
		</style>
	</head>
	<body>
		<div id="main">
			<div id="st_horizontal" class="st_horizontal">
				<div class="st_tabs_container">
					<!--
					<a class="st_prev st_btn_disabled" href="#prev"
						style="display: inline;"></a>
					-->
					<div class="st_slide_container" style="overflow: hidden;">
						<ul class="st_tabs" style="margin-left: 0px;">
							<li><a class="st_tab" href="#st_content_1" rel="tab_1">Horizontal
									新消息</a></li>
							<li><a class="st_tab" href="#st_content_2" rel="tab_2">Horizontal
									未读消息</a></li>
							<li><a class="st_tab" href="#st_content_3" rel="tab_3">Horizontal
									历史消息</a></li>
						</ul>
					</div>
					<!-- /.st_slide_container 
					<a class="st_next" href="#next" style="display: inline;"></a>
					-->
				</div>
				<!-- /.st_tabs_container -->
				<div class="st_view_container">
					<div class="st_view">
						<div id="st_content_1" class="st_tab_view"
							style="position: absolute;">
							<iframe frameborder="0">
							</iframe>
						</div>
						<div id="st_content_2" class="st_tab_view"
							style="position: absolute; display: none; left: -775px;">
							<iframe frameborder="0">
							</iframe>
						</div>
						<div id="st_content_3" class="st_tab_view"
							style="position: absolute; display: none; left: -775px;">
							<iframe frameborder="0">
							</iframe>
						</div>
					</div>
					<!-- /.st_view -->
				</div>
			</div>
		</div>
	</body>
</html>
